<template>
  <view>
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view solt="top">
        <u-navbar
          backIconColor="#333333"
          title-size="36"
          title="我的投放"
          :is-back="true"
          :border-bottom="false"
          title-color="#333333"
        >
        </u-navbar>
      </view>
      <!-- <u-gap height="20" bg-color="#F0F1F2"></u-gap> -->
      <view class="order-box" v-for="(item, index) in itemList" :key="index">
        <view class="content dis-flex">
          <u-image :src="item.imageUrl" width="140rpx" height="210rpx" border-radius="8"></u-image>
          <view class="info">
            <view class="name dis-flex flex-y-between flex-y-center">
              <view class="name-l">投放金额：¥{{ (item.budgetPrice * 0.01).toFixed(2) }}</view>
              <view class="status" style="color: #909399" v-if="item.status == 0">待付款</view>
              <view class="status" v-if="item.status == 10">待审核</view>
              <view class="status" v-if="item.status == 20">投放中</view>
              <view class="status" style="color: #10a28f" v-if="item.status == 30">已结束</view>
            </view>
            <view class="num">
              <text v-if="item.exceptDuration >= 3600">
                {{ (item.exceptDuration / 3600).toFixed(0) }}小时
              </text>
              <text v-else-if="item.exceptDuration < 3600 && item.exceptDuration >= 60">
                {{ (item.exceptDuration / 60).toFixed(0) }}分钟
              </text>
              <text v-else> {{ item.exceptDuration }}秒 </text>
            </view>
            <view class="points">
              已曝光次数：<text class="count"
                >{{ item.actualExposureCount }}/{{ item.exceptExposureCount }}</text
              >次<text class="sy"
                >(剩余：{{
                  item.exceptExposureCount - item.actualExposureCount > 0
                    ? item.exceptExposureCount - item.actualExposureCount
                    : 0
                }})</text
              >
            </view>
            <view class="date">
              发布时间：{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM') }}
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      itemList: []
    }
  },
  onLoad() {
    this.queryList()
  },
  methods: {
    toDetail() {
      // this.$utils.route('/alliance/order-detail')
    },
    queryList(page = 1, pageSize = 10) {
      this.$u
        .get('/app-api/ad/plan/my-page', {
          pageNo: page,
          pageSize
        })
        .then((res) => {
          // let dynamicPaging = this.scurrent > 0 ? 'paging' + this.scurrent : "paging"
          this.$refs.paging.complete(res.data.list)
        })
    }
  }
}
</script>

<style scoped lang="scss">
.order-box {
  background: #ffffff;
  border-radius: 10rpx;
  margin: 20rpx 20rpx 0 20rpx;
  padding: 20rpx;

  .content {
    // margin-top: 20rpx;

    .info {
      flex: 1;
      margin-left: 20rpx;
      height: 210rpx;
      display: flex;
      justify-content: space-between;
      flex-flow: column;
      padding: 2rpx 0;
      .name {
        font-size: 30rpx;
        color: #333333;
        .status {
          font-size: 28rpx;
          color: #ff6f10;
        }
      }
      .num {
        width: 96rpx;
        // height: 32rpx;
        border-radius: 16rpx;
        border: 1px solid #e6e6e6;
        font-size: 20rpx;
        color: #999999;
        line-height: 32rpx;
        text-align: center;
        padding: 0;
      }
      .points {
        font-size: 26rpx;
        color: #666666;
        .count {
          color: #10a28f;
          font-size: 32rpx;
        }
        .sy {
          color: #999999;
        }
      }
      .date {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
}
</style>
